<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/default}">
<head>
    <title th:text="${claim.claimType.name() == 'CLAIM_FOUND' ? '认领详情' : '找到物品详情'}">申请详情</title>
</head>
<body>
    <div layout:fragment="content" class="fade-in">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>
                <i th:if="${claim.claimType.name() == 'CLAIM_FOUND'}" class="fas fa-hand-holding-heart me-2"></i>
                <i th:unless="${claim.claimType.name() == 'CLAIM_FOUND'}" class="fas fa-search-plus me-2"></i>
                <span th:text="${claim.claimType.name() == 'CLAIM_FOUND' ? '认领详情' : '找到物品详情'}">申请详情</span>
            </h2>
            <div>
                <a th:href="@{/claims/item/{id}(id=${claim.item.id})}" class="btn btn-secondary me-2">
                    <i class="fas fa-list me-2"></i>申请列表
                </a>
                <a th:href="@{/items/{id}(id=${claim.item.id})}" class="btn btn-primary">
                    <i class="fas fa-eye me-2"></i>查看物品
                </a>
            </div>
        </div>
        
        <div th:if="${successMessage}" class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle me-2"></i>
            <span th:text="${successMessage}"></span>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        
        <div th:if="${errorMessage}" class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-circle me-2"></i>
            <span th:text="${errorMessage}"></span>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        
        <div class="row">
            <div class="col-md-8">
                <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0" th:text="${claim.claimType.name() == 'CLAIM_FOUND' ? '认领信息' : '找到物品信息'}">申请信息</h5>
                        <div>
                            <span class="badge bg-secondary me-2" th:text="${claim.claimType.displayName}">申请类型</span>
                            <span class="badge" th:classappend="${
                                claim.status.name() == 'PENDING' ? 'bg-warning' : 
                                claim.status.name() == 'APPROVED' ? 'bg-success' : 
                                'bg-danger'
                            }" th:text="${claim.status.displayName}">状态</span>
                        </div>
                    </div>
                    <div class="card-body">
                        <table class="table">
                            <tr>
                                <th style="width: 30%">申请ID</th>
                                <td th:text="${claim.id}">ID</td>
                            </tr>
                            <tr>
                                <th>物品名称</th>
                                <td>
                                    <a th:href="@{/items/{id}(id=${claim.item.id})}" th:text="${claim.item.title}">物品名称</a>
                                </td>
                            </tr>
                            <tr>
                                <th>物品状态</th>
                                <td>
                                    <span class="badge" th:classappend="${
                                        claim.item.status.name() == 'LOST' ? 'bg-danger' : 
                                        claim.item.status.name() == 'FOUND' ? 'bg-success' : 
                                        'bg-info'
                                    }" th:text="${claim.item.status.displayName}">物品状态</span>
                                </td>
                            </tr>
                            <tr>
                                <th th:text="${claim.claimType.name() == 'CLAIM_FOUND' ? '认领者' : '提交者'}">申请人</th>
                                <td th:text="${claim.claimer.username}">申请人</td>
                            </tr>
                            <tr>
                                <th th:text="${claim.claimType.name() == 'CLAIM_FOUND' ? '认领说明' : '找到物品说明'}">申请说明</th>
                                <td th:text="${claim.description}">申请说明</td>
                            </tr>
                            <tr>
                                <th th:text="${claim.claimType.name() == 'CLAIM_FOUND' ? '认领时间' : '提交时间'}">申请时间</th>
                                <td th:text="${#temporals.format(claim.claimTime, 'yyyy-MM-dd HH:mm:ss')}">申请时间</td>
                            </tr>
                            <tr th:if="${claim.processedTime != null}">
                                <th>处理时间</th>
                                <td th:text="${#temporals.format(claim.processedTime, 'yyyy-MM-dd HH:mm:ss')}">处理时间</td>
                            </tr>
                        </table>
                    </div>
                    
                    <!-- 处理按钮 - 仅对待处理的认领显示 -->
                    <div class="card-footer" th:if="${claim.status.name() == 'PENDING' && claim.item.user != null && currentUser != null && claim.item.user.id == currentUser.id}">
                        <div class="d-flex justify-content-between">
                            <form th:action="@{/claims/{id}/status(id=${claim.id})}" method="post">
                                <input type="hidden" name="status" value="APPROVED">
                                <button type="submit" class="btn btn-success">
                                    <i class="fas fa-check me-2"></i>
                                    <span th:text="${claim.claimType.name() == 'CLAIM_FOUND' ? '批准认领' : '确认找到'}">批准</span>
                                </button>
                            </form>
                            
                            <form th:action="@{/claims/{id}/approve-complete(id=${claim.id})}" method="post">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-check-circle me-2"></i>
                                    <span th:text="${claim.claimType.name() == 'CLAIM_FOUND' ? '批准并完成' : '确认找到并完成'}">批准并完成</span>
                                </button>
                            </form>
                            
                            <form th:action="@{/claims/{id}/status(id=${claim.id})}" method="post">
                                <input type="hidden" name="status" value="REJECTED">
                                <button type="submit" class="btn btn-danger">
                                    <i class="fas fa-times me-2"></i>
                                    <span th:text="${claim.claimType.name() == 'CLAIM_FOUND' ? '拒绝认领' : '拒绝确认'}">拒绝</span>
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <!-- 物品图片 -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">物品图片</h5>
                    </div>
                    <div class="card-body text-center">
                        <img th:if="${claim.item.imagePath != null}" th:src="${claim.item.imagePath}" class="img-fluid rounded" alt="物品图片"
                             style="max-height: 200px; width: auto;">
                        <img th:if="${claim.item.imagePath == null}" src="/static/images/no-image.svg" class="img-fluid rounded" alt="无图片"
                             style="max-height: 200px; width: auto;">
                    </div>
                </div>
                
                <!-- 认领/找到证明图片 -->
                <div class="card mb-4" th:if="${claim.imagePath != null}">
                    <div class="card-header">
                        <h5 class="mb-0" th:text="${claim.claimType.name() == 'CLAIM_FOUND' ? '认领证明图片' : '找到物品照片'}">证明图片</h5>
                    </div>
                    <div class="card-body text-center">
                        <img th:src="${claim.imagePath}" class="img-fluid rounded" alt="证明图片"
                             style="max-height: 200px; width: auto;">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html> 